<script>
export default {
  data(){
    return {
      type:""
    }
  },
  created() {
  },
  methods: {
    async subt(type) {
      var formData = ''
      try {
        if (type == 'choice') {
          var formData = $("#choice").serializeArray();
          var formdata = {}
          for (var i in formData) {
            formdata[formData[i]["name"]] = formData[i]['value']
          }
          var response = await this.$axios.post(this.$s_host + '/items/insert_choice/', JSON.stringify(formdata), {
            headers: {
              'Content-Type': 'application/json'
            }
          });
          if (response.data == true) {
            alert("插入成功")
          }
        } else {
          var formdata = {}
          var formData = $('#word').serializeArray();
          for (var i in formData) {
            formdata[formData[i]["name"]] = formData[i]['value']
          }

          var response = await this.$axios.post(this.$s_host + '/items/insert_word/', JSON.stringify(formdata), {
            headers: {
              'Content-Type': 'application/json'
            }
          });
          if (response.data == true) {
            alert("插入成功")
          }
        }
      } catch (error) {
        if (error.response) {
          // 请求已发出，服务器也响应了状态码，但状态码不在 2xx 范围内
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
          if (error.response.status == 422) {
            alert("格式错误")
          }
        } else if (error.request) {
          // 请求已发出，但没有收到任何响应
          console.log(error.request);
        } else {
          // 发送请求时发生了某些事情，导致请求没有成功发出
          console.log('Error', error.message);
        }
      }
    }
  }
}

</script>

<template>
  <el-col :span="20">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="选择题">
        <form action="" id="choice" @submit.prevent="subt('choice')">
          <div>
            <select name="language" id="">
              <option value="python">python</option>
              <option value="linux">linux</option>
              <option value="algo">算法</option>
            </select>
          </div>
          <div>
            <label for="question">問題: </label><textarea name="question"></textarea>
          </div>
          <div>
            <label>A:<textarea name="A"></textarea></label>
          </div>
          <div>
            <label>B<textarea name="B"></textarea></label>
          </div>
          <div>
            <label>C<textarea name="C"></textarea></label>
          </div>
          <div>
            <label>D<textarea name="D"></textarea></label>
          </div>
          <div>
            <label>答案:<textarea name="answer"></textarea></label>
          </div>
          <input type="text" style="display: none" value="0">
          <button type="submit">提交</button>
        </form>
      </el-tab-pane>
      <el-tab-pane label="应用题">
        <form action="" id="word" @submit.prevent="subt('word')">
          <div>
            <select name="language" id="">
              <option value="python">python</option>
              <option value="linux">linux</option>
              <option value="algo">算法</option>
            </select>
          </div>
          <div>
            <label for="question">問題: </label><textarea name="question"></textarea>
          </div>
          <div>
            <label for="answer">答案：</label><textarea name="anwser"></textarea>
          </div>
          <input type="text" style="display: none" value="0">
          <button type="submit">提交</button>
        </form>
      </el-tab-pane>
    </el-tabs>
  </el-col>
</template>

<style scoped>
input,textarea {
  width: 60%;
  float: right;
}

#choice，#word label {
  width: 15%;
}
</style>